<template>
  <view class="container">
    <!-- 账户信息 -->
    <view class="account-card">
      <view class="account-info">
        <text class="account-label">可提现金额</text>
        <text class="account-value">{{ formatPrice(accountInfo.balance) }}</text>
      </view>
      <view class="account-detail">
        <text class="detail-text">总余额：{{ formatPrice(accountInfo.totalBalance) }}</text>
        <text class="detail-text">积分余额：{{ formatPoint(accountInfo.pointBalance) }}</text>
      </view>
    </view>

    <!-- 提现规则 -->
    <view class="rules-section">
      <text class="rules-title">提现规则</text>
      <view class="rules-list">
        <text class="rule-item">• 每月15号后可提现上月及之前的收益</text>
        <text class="rule-item">• 提现通过支付宝转入账户</text>
        <text class="rule-item">• 提现申请需要审核，请耐心等待</text>
        <text class="rule-item">• 积分兑换比例：100积分 = 1元</text>
      </view>
    </view>

    <!-- 提现表单 -->
    <view class="withdraw-form">
      <text class="form-title">申请提现</text>
      
      <!-- 提现金额 -->
      <view class="form-item">
        <text class="item-label">提现金额</text>
        <input 
          class="amount-input" 
          type="digit" 
          v-model="withdrawAmount"
          placeholder="请输入提现金额"
          placeholder-class="placeholder"
        />
        <text class="amount-unit">元</text>
      </view>
      
      <!-- 支付宝账号 -->
      <view class="form-item">
        <text class="item-label">支付宝账号</text>
        <input 
          class="account-input" 
          v-model="alipayAccount"
          placeholder="请输入支付宝账号"
          placeholder-class="placeholder"
        />
      </view>
      
      <!-- 真实姓名 -->
      <view class="form-item">
        <text class="item-label">真实姓名</text>
        <input 
          class="name-input" 
          v-model="realName"
          placeholder="请输入真实姓名"
          placeholder-class="placeholder"
        />
      </view>
      
      <!-- 提现说明 -->
      <view class="form-item">
        <text class="item-label">提现说明</text>
        <textarea 
          class="remark-input" 
          v-model="remark"
          placeholder="请输入提现说明（选填）"
          placeholder-class="placeholder"
          maxlength="200"
        />
      </view>
      
      <!-- 提现按钮 -->
      <view class="submit-section">
        <button 
          class="submit-btn" 
          :disabled="!canSubmit"
          @click="handleSubmit"
        >
          {{ submitBtnText }}
        </button>
      </view>
    </view>

    <!-- 提现记录 -->
    <view class="history-section">
      <text class="history-title">提现记录</text>
      <view v-if="withdrawHistory.length === 0" class="no-history">
        <text class="no-history-text">暂无提现记录</text>
      </view>
      <view v-else class="history-list">
        <view 
          class="history-item" 
          v-for="(item, index) in withdrawHistory" 
          :key="index"
        >
          <view class="history-info">
            <text class="history-amount">{{ formatPrice(item.amount) }}</text>
            <text class="history-status" :class="getStatusClass(item.status)">
              {{ getStatusText(item.status) }}
            </text>
          </view>
          <text class="history-time">{{ formatTime(item.time) }}</text>
          <text v-if="item.remark" class="history-remark">{{ item.remark }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getCurrentAccount } from '@/api/user.js'

export default {
  data() {
    return {
      accountInfo: {}, // 账户信息
      withdrawAmount: '', // 提现金额
      alipayAccount: '', // 支付宝账号
      realName: '', // 真实姓名
      remark: '', // 提现说明
      withdrawHistory: [] // 提现记录
    }
  },
  computed: {
    // 是否可以提交
    canSubmit() {
      const amount = parseFloat(this.withdrawAmount)
      return amount > 0 && 
             amount <= this.accountInfo.balance / 100 && 
             this.alipayAccount && 
             this.realName
    },
    
    // 提交按钮文字
    submitBtnText() {
      const amount = parseFloat(this.withdrawAmount)
      if (amount > this.accountInfo.balance / 100) {
        return '余额不足'
      } else if (!this.alipayAccount) {
        return '请输入支付宝账号'
      } else if (!this.realName) {
        return '请输入真实姓名'
      } else {
        return '申请提现'
      }
    }
  },
  onLoad() {
    this.loadAccountInfo()
    this.loadWithdrawHistory()
  },
  onShow() {
    // 每次显示页面时刷新账户信息
    this.loadAccountInfo()
  },
  methods: {
    // 加载账户信息
    async loadAccountInfo() {
      try {
        const res = await getCurrentAccount()
        this.accountInfo = res.data
      } catch (error) {
        console.error('加载账户信息失败:', error)
      }
    },
    
    // 加载提现记录
    loadWithdrawHistory() {
      const history = uni.getStorageSync('withdrawHistory')
      if (history) {
        this.withdrawHistory = history
      }
    },
    
    // 提交提现申请
    async handleSubmit() {
      if (!this.canSubmit) return
      
      try {
        const amount = parseFloat(this.withdrawAmount)
        
        uni.showLoading({
          title: '提交中...'
        })
        
        // 这里应该调用实际的提现接口
        // POST /agg/withdraw/apply
        const withdrawData = {
          amount: amount * 100, // 转换为分
          alipayAccount: this.alipayAccount,
          realName: this.realName,
          remark: this.remark
        }
        
        console.log('提现申请数据:', withdrawData)
        
        // 模拟接口调用
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        uni.hideLoading()
        
        // 保存提现记录
        this.saveWithdrawHistory({
          amount: amount * 100,
          alipayAccount: this.alipayAccount,
          realName: this.realName,
          remark: this.remark,
          status: 0, // 0-待审核
          time: new Date().toISOString()
        })
        
        uni.showModal({
          title: '申请成功',
          content: '提现申请已提交，请耐心等待审核',
          showCancel: false,
          success: () => {
            // 清空表单
            this.withdrawAmount = ''
            this.alipayAccount = ''
            this.realName = ''
            this.remark = ''
          }
        })
        
        // 刷新账户信息
        await this.loadAccountInfo()
        
      } catch (error) {
        uni.hideLoading()
        console.error('提现申请失败:', error)
        uni.showToast({
          title: '申请失败',
          icon: 'none'
        })
      }
    },
    
    // 保存提现记录
    saveWithdrawHistory(record) {
      this.withdrawHistory.unshift(record)
      
      // 保存到本地存储
      uni.setStorageSync('withdrawHistory', this.withdrawHistory)
    },
    
    // 获取状态文字
    getStatusText(status) {
      const statusMap = {
        0: '待审核',
        1: '已通过',
        2: '已拒绝'
      }
      return statusMap[status] || '未知状态'
    },
    
    // 获取状态样式类
    getStatusClass(status) {
      const classMap = {
        0: 'status-pending',
        1: 'status-approved',
        2: 'status-rejected'
      }
      return classMap[status] || ''
    },
    
    // 格式化价格
    formatPrice(price) {
      return (price / 100).toFixed(2) + '元'
    },
    
    // 格式化积分
    formatPoint(point) {
      return (point || 0).toFixed(2) + '分'
    },
    
    // 格式化时间
    formatTime(time) {
      if (!time) return ''
      const date = new Date(time)
      return date.toLocaleString()
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 30rpx;
}

.account-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12rpx;
  padding: 40rpx;
  margin-bottom: 30rpx;
  color: #fff;
}

.account-info {
  text-align: center;
  margin-bottom: 30rpx;
}

.account-label {
  font-size: 28rpx;
  opacity: 0.8;
  display: block;
  margin-bottom: 10rpx;
}

.account-value {
  font-size: 48rpx;
  font-weight: bold;
  display: block;
}

.account-detail {
  display: flex;
  justify-content: space-between;
}

.detail-text {
  font-size: 24rpx;
  opacity: 0.8;
}

.rules-section, .withdraw-form, .history-section {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.rules-title, .form-title, .history-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 30rpx;
}

.rules-list {
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 8rpx;
}

.rule-item {
  font-size: 26rpx;
  color: #666;
  display: block;
  margin-bottom: 10rpx;
  line-height: 1.5;
}

.rule-item:last-child {
  margin-bottom: 0;
}

.form-item {
  margin-bottom: 30rpx;
}

.item-label {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  display: block;
  margin-bottom: 15rpx;
}

.amount-input, .account-input, .name-input {
  width: 100%;
  height: 80rpx;
  background: #f8f9fa;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
  border: 2rpx solid transparent;
  transition: all 0.3s;
}

.amount-input:focus, .account-input:focus, .name-input:focus {
  background: #fff;
  border-color: #667eea;
}

.amount-input {
  display: flex;
  align-items: center;
}

.amount-unit {
  position: absolute;
  right: 20rpx;
  font-size: 24rpx;
  color: #999;
}

.remark-input {
  width: 100%;
  height: 120rpx;
  background: #f8f9fa;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 28rpx;
  color: #333;
  border: 2rpx solid transparent;
  transition: all 0.3s;
}

.remark-input:focus {
  background: #fff;
  border-color: #667eea;
}

.placeholder {
  color: #999;
}

.submit-section {
  margin-top: 40rpx;
}

.submit-btn {
  width: 100%;
  height: 90rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
  border-radius: 12rpx;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.submit-btn::after {
  border: none;
}

.submit-btn[disabled] {
  background: #ccc;
  color: #999;
  opacity: 0.6;
}

.no-history {
  text-align: center;
  padding: 60rpx 0;
}

.no-history-text {
  font-size: 28rpx;
  color: #999;
}

.history-list {
  max-height: 400rpx;
  overflow-y: auto;
}

.history-item {
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.history-item:last-child {
  border-bottom: none;
}

.history-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.history-amount {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.history-status {
  padding: 6rpx 12rpx;
  border-radius: 6rpx;
  font-size: 20rpx;
  font-weight: bold;
}

.status-pending {
  background: #fff7e6;
  color: #fa8c16;
}

.status-approved {
  background: #f6ffed;
  color: #52c41a;
}

.status-rejected {
  background: #fff2f0;
  color: #ff4d4f;
}

.history-time {
  font-size: 24rpx;
  color: #999;
  display: block;
  margin-bottom: 5rpx;
}

.history-remark {
  font-size: 22rpx;
  color: #666;
  display: block;
}
</style>
